<template>
	<view class="container" style="height: 100%;">
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="card" v-for="(item,index) in listdata" @tap="godetails(item)" v-if="true">
				<view class="card-left">
					<view class="right-box">
						<view class="info-box">
							<view class="name">{{item.car_number}}</view>
						</view>
						<view class="address" v-if="item.position_pattern == 1">车牌号：{{item.car_number}}</view>
						<view class="address" v-if="item.is_park_month_type == 1">停车到期时间：{{item.end_time}}</view>
					</view>
				</view>
				<image src="../../../static/images/right.png" mode="" class="right-img"></image>
			</view>
			<view class="tip_box_no_data" v-if="false">
				<image class="no_data_img" src="../../../static/images/no_data.png"></image>
				<view class='no_tip_content'>暂无搜素结果</view>
			</view>
		</scroll-view>
		<!-- 弹层 -->
		<view>
			<uni-popup ref="popup" type="center" class="popup_box_msg" :maskClick="false" style="width: 100%;">
				<view class="popup-box">
					<view class="popup-title">
						联系物业
					</view>
					<view class="popup_conten" @tap="goStopPark">
						<view class="tel_tip">
							<image src="../../../static/images/yuezhuche.png" class="tel_img"></image>
							<view class="tel_msg">停车费储值</view>
						</view>
					</view>
					<view class="popup_conten" @tap="goMonthPark">
						<view class="tel_tip">
							<image src="../../../static/images/chuzhiche.png" class="tel_img"></image>
							<view class="tel_msg">月租卡储值</view>
						</view>
					</view>
				</view>
				<view class="close_box">
					<view class="close_click_box" @tap="closePopup">
						<image src="../../../static/images/close.png" class="close_img"></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from '../../../appComponent/uni/uni-popup/uni-popup.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getsearchList = () => {
		common.post('HouseApi&a=new_park_list', {
			village_id: _this.village_id,
		}, data => {
			console.log('++++', data)
			if (data.dataList[0]) {
				_this.listdata = data.dataList;
				_this.no_data = false;
			} else {
				_this.listdata = data.dataList;
				_this.no_data = true;
			}
		});
	};
	// const getconfirmPass = () => {
	// 	common.post('HouseApi&a=chk_visitor_info', {
	// 		village_id: _this.village_id,
	// 		pigcms_id: _this.pigcms_id,
	// 		id: _this.id,
	// 	}, data => {
	// 		console.log('++++', data)
	// 		getvisitorList();
	// 		uni.navigateTo({
	// 			url:'/pages/village/my/visitorRegistrationlist'
	// 		})
	// 	});
	// };

	export default {
		data() {
			return {
				listdata: [],
				room_id: '',
				tabbar: {},
				hidesearch: false,
				searchwords: '',
				village_id: '',
				hidetip: true,
				no_data: false,
				popup_box_style: '',
				popup_box_content: '',
				car_id:'',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
			if (_this.isFirstLoad == false) {
				getvisitorList();
			}
		},
		onLoad(options) {
			_this = this;
			_this.visitor_id = options.visitor_id;
			console.log("3333333333333", _this.qrcode)
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};

				if (!app.globalData.is_login) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}
				getsearchList()

			});
		},
		methods: {
			kf_parse_url(url) {
				common.parseUrl(url);
			},
			goMonthPark(phone) {
				
			},
			godetails(item) {
				if(item.is_park_month_type == 1 && item.is_temporary_park_type == 1){
					_this.$refs.popup.open();
					_this.car_id = item.car_id;
				}else if(item.is_park_month_type == 1 && item.is_temporary_park_type == 0){
					uni.navigateTo({
						url:'/pages/village/smartPark/parkpayment?car_id=' + item.car_id + '&car_type=month_type'
					})
				}else if(item.is_park_month_type == 0 && item.is_temporary_park_type == 1){
					uni.navigateTo({
						url:'/pages/village/smartPark/stopParkMoney?car_id=' + item.car_id + '&car_type=stored_type'
					})
				}
				
			},
			goStopPark(){
				uni.navigateTo({
					url:'/pages/village/smartPark/stopParkMoney?car_id=' + _this.car_id + '&car_type=stored_type'
				})
			},
			goMonthPark(){
				uni.navigateTo({
					url:'/pages/village/smartPark/parkpayment?car_id=' + _this.car_id + '&car_type=month_type'
				})
			},
			closePopup() {
				_this.$refs.popup.close();
			},
		},
		components: {
			uniPopup
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.scroll-box {
		height: calc(100vh - 1rpx);
	}

	.card {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.user-img {
		width: 82rpx;
		height: 82rpx;
		display: block;
	}

	.right-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 15rpx;
	}

	.info-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.name {
		font-size: 28rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 45rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.tips {
		background-color: #2681f3;
		border-radius: 8rpx;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 45rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}

	.address {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 1.5;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.right-img {
		width: 35rpx;
		height: 35rpx;
		display: inline-block;
		flex-shrink: 0;
	}

	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
		border-radius: 102rpx;
	}

	.independent-img {
		width: 100%;
		height: 100%;
		border-radius: 102rpx;
	}

	.popup-box {
		padding: 30rpx 0 100rpx;
		background-color: #ffffff;
	}

	.popup-box .popup-title {
		text-align: center;
		font-size: 30rpx 0;
		color: #333333;
		font-weight: 500;
		line-height: 60rpx;
		padding-bottom: 45rpx;
	}

	.popup-box .popup_conten {
		width: 500rpx;
		padding: 45rpx 0;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.popup-box .tel_tip {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		text-align: left;
	}

	.popup-box .tel_msg {
		text-align: left;
		flex-grow: 1;
		padding-left: 20rpx;
	}

	.popup-box .tel_img {
		width: 40rpx;
		height: 40rpx;
		padding-left: 30rpx;
	}

	.popup_box_msg .close_box {
		margin-top: 50rpx;
		position: absolute;
		bottom: -120rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: -webkit-center;
	}

	.popup_box_msg .close_click_box {
		
	}

	.popup_box_msg .close_img {
		width: 60rpx;
		height: 60rpx;
	}

	.popup_box_msg .popup-list {
		height: 400rpx;
		overflow: hidden;
	}

	.tip_box_no_data {
		padding-top: calc((100vh - 80rpx - 288rpx - 300rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}

	.no_data_img {
		width: 374rpx;
		height: 288rpx;
	}
</style>
